board: on a phone a table row is a card, not a ribbon - #272

The sideways scroll is gone, and what it was hiding is now the problem: a
four-column row does not fit a phone, it just stops overflowing. Measured on
the Mind dashboard's Recent feed at a 375px viewport, the meta columns took
156px and the text was left 187 — half the screen — so every entry wrapped
into a tall thin column down the right while `when` and `what` sat beside it
as empty height. The Heart board is the same shape and worse: its summary had
213px of 390 and one row ran 472px down the screen.

Below 34rem the row stacks instead. The meta cells read as one small header
line with the 📋 at its end, and the text takes a full-width line underneath:
187px -> 343px on the Mind feed, and each board's own cells fall into the same
frame (the Heart's dot and title lead, its summary follows).

`:not([hidden])` on the flex rule is load-bearing rather than defensive:
`display:flex` outranks the UA sheet's `[hidden]{display:none}`, so a bare
`table.recent tr` selector reveals the whole paged Recent feed at once — 50
rows instead of 10. Caught by the page growing from 6.3k to 11.5k pixels
between two renders; pinned by a test.

469 tests pass, three new (the stack, the text's full-width line, the hidden
guard). The wide layout is untouched — the media query is the only new
selector above 34rem.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01VhpLPmmoSFAtVpppG8azVA